<template>
  <div class="control-setter">
    <div v-if="panelData.label" class="panel-label">{{panelData.label}}</div>
   
    <div class="panel-content">
      <a-form-model :model="parsedFieldConfig.formData" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
        <div v-for="(field, fieldIndex) in parsedFieldConfig.fieldConfigList"  :key="fieldIndex" class="selector-item" :style="field.domStyle" :class="field.domClass" >
        <a-form-model-item 
          :key="fieldIndex"
          :label="field.label">
          <component 
            :is="field.type"
            v-model="formData[field.name]"
            v-bind="field.bind || {}"
            :name="field.name"
            :label="field.label"
            :props="field.props"
            @on-data-change="onChildComponentDataChange"
          >
          </component>
        </a-form-model-item>
        </div>
      </a-form-model>
    </div>
  </div>
    
</template>

<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
// Watch, Emit
import VisualizationStore from '@/store/modules/visualization'
import { GridItemDataInterface } from '../vueGridLayout/interfate/grid-Item-data-inteface'
import fieldMapping, { componentLibrary } from './field-mapping'
import { IPanelConfig, IComponentConfig} from './interface'


@Component({
  components: {
    ...componentLibrary
  }
})
export default class PanelSetter extends Vue {
  @Prop() panelData!: IPanelConfig



  private fieldConfigList: IComponentConfig[] = []
  private formData = {}
 

  public mounted():void {
    // console.error('DataViewStore=========>', DataViewStore)
  }
  // public created() {
  //   console.error('this.$route.params', (this.$route.params as any))
  //   // const {parsedConfig, formData} = this.parseFieldConfig()
  //   // this.fieldConfigList = parsedConfig
  //   // this.formData = formData
  // }

  public get parsedFieldConfig () {
    const {parsedConfig, formData} = this.parseFieldConfig()
    return {fieldConfigList: parsedConfig, formData}
  }


  // @Watch('formData', { immediate: false, deep: true })
  // @Emit('on-data-change')
  // onFormDataChanged(oldValue:any, newValue:any) {
  //   console.log('onFormDataChanged', this.formData)
  //   return newValue
  // }


  public onChildComponentDataChange([fieldName, fieldValue] : [string, any]) {
    this.formData = {
      ...this.formData,
      [fieldName]: fieldValue
    }
    this.$emit('on-data-change', this.formData, fieldName, fieldValue)
    // console.log('onChildComponentDataChange', fieldName, fieldValue)
  }

  public get currentGridItem():GridItemDataInterface|null{
    return VisualizationStore.currentGridItem
  }

  public parseFieldConfig() {
    const formData = {}
    const parsedConfig:IComponentConfig[] = (this.panelData.children || []).map((fieldConfig: IComponentConfig) => {
      const type = fieldConfig.type || 'text'
      const { label, value, name, domClass, domStyle, props: fieldConfigProperties } = fieldConfig
      const fieldDefinition = (fieldMapping as any)[type] || fieldMapping.text

      const config:IComponentConfig = {
        type: fieldDefinition.component || 'input-field',
        props: {
          ...fieldDefinition.props,
          ...fieldConfigProperties,
        },
        label,
        value,
        name,
        domClass,
        domStyle
      }
      console.log('parseFieldConfig', config)
      // @ts-ignore
      formData[name] = value
      console.log('formdata', formData)

      return config

    })

    return {
      parsedConfig,
      formData
    }
  }

  public handleSubmit(event: any) {
    event.preventDefault()
  }
}

</script>

<style lang="less" scoped>
  .panel-label {
    background-color: #e7e7e7;
    height: 36px;
    line-height: 36px;
    padding-left: 8px;
  }

  .panel-content {
    padding: 0 16px;
    width: 100%;

    .ant-form-item {
      margin-bottom: 0;
    }
  }

  /deep/ .ant-form-item label {
    color: #555;
    font-size: 14px;
  }
</style>
